<script type="text/javascript" >
    jQuery(document).ready(function(){
        
    }); // end document ready
</script>
<style>
    .file-wrapper {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
    }
    .file-wrapper .button {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width:100px !important;
    height:25px !important;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 18px;
    text-align:center;
    text-transform:uppercase;
    }
    .file-wrapper input {
    cursor: pointer;
    height: 25px;
    position: absolute;
    right: 0;
    top: 0;
    }
    .file-wrapper input {
    filter: alpha(opacity=1);
    -moz-opacity: 0.01;
    opacity: 0.01;
    font-size: 25px;
    } 
</style>
<div id="dialog-form"  style="display: none;position: absolute;left: 100px; top: 100px;" >
	  <div id="wrap-popup">
        <form action="<?php $this->config->base_url() ?>index.php/item/addItem" method="post" name="addPersonForm" id="addPersonForm" enctype="multipart/form-data">
        <!-- BEGIN TOP WAP_POPUP -->
            <div class="top-wap-popup">
                
                <div class="left-top-wap-container">
                    <div id="avatar">
                        <div class="avatar-popup" >
                            <img src="<?php echo $this->config->base_url();?>images/avatar-lange.png" alt="icon" />
                        </div>
                        <p>Images no larger then 650x500, preferrably jpg gif, png in hight quality</p>    
                           <span class="file-wrapper">
                            <input type="file" name="userfile" id="photo" />
                            <span class="button upload-img"></span>
                          </span>
                     </div>
                </div>
                    
                 <div class="right-top-wap-container" id="field-container">
                     <input  type="hidden" id="categoryId"  name="categoryId" />
                    <input class="text" type="text" id="txtName" name="name" value="Name"/>
                    <input class="text" type="text" id="txtCompany" name="company" value="Company"/>
                    <input class="text" type="text" id="txtUrl" name="url" value="URL"/>
                    <input class="text" type="text" id="txtLinked" name="linkin" value="Linkin"/>
                    <input class="add-person" type="Submit" id="btnAddPerson" name="btnAddPerson" value="Add this person"/>
                    <button class="add-person"  style="margin-top: -2px;" onclick="closeAddPerson(); return false;"/>Cancel</button>
                </div>                
            </div>
        <!-- END TOP WAP_POPUP -->
         </form>   
        <!-- BEGIN BOTTOM WAP_POPUP -->
            <div class="bottom-wap-popup">
                <input class="text-area" type="text" id="txtLinked" name="txtLinked" value=" "/>
                <input class="button" type="Submit" id="btnAddLinkedin" name="btnAddLinkedin" value="Add by LinkedIn"/>
            </div>
        <!-- END BOTTOM WAP_POPUP -->    
    </div>
    
    
</div>

<style type="text/css">
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:100;
  background-color:#3F3F3F;
  display:none;
  
}
</style>
<div id="mask"></div>
</body>
</html>